<template>
  <mu-container>
  <mu-appbar style="width: 100%;" title="段落列表" class="title">
     <mu-select label="难度" v-model="type" slot="right" style="transform:translateY(10px)" @change="difficultyHandler" >
        <mu-option v-for="(option) in options" :key="option" :label="option" :value="option"></mu-option>
      </mu-select>
  </mu-appbar>
  <mu-paper style="height:100%" :z-depth="1" v-if="!passages.length">
    <mu-flex style="height:100%" justify-content="center" align-items="center"> 
      <h4>暂无文章</h4>
    </mu-flex>
  </mu-paper>
  <mu-expansion-panel v-for="(passage,index) in passages"
  :key="index"
  :expand="panel === `panel${index}`" 
  @change="toggle(`panel${index}`)"
  >
    <div slot="header">{{passage.title}}
       <mu-chip :color="passage.type==1?'red':'green'">
         {{passage.type==1?'Hard':'Easy'}}
      </mu-chip>
    </div>
     <mu-linear-progress :value="rando" mode="determinate" :color="passage.type==1?'red':'green'"></mu-linear-progress>
    <mu-button slot="action" flat color="primary" @click="PLAY(passage.id)">PLAY</mu-button>
  </mu-expansion-panel>
  <mu-paper style="margin-top:5px" :z-depth="1">
    <mu-flex justify-content="center" style="margin: 20px 10px;padding:10px 0">
    <mu-pagination 
    color="blueGrey700" 
    circle 
    :total="total"
    :page-size="6"
    :current.sync="current"
    @change="pageChangeHandler"></mu-pagination>
  </mu-flex>
  </mu-paper>
  </mu-container>

</template>
<script>
import {getList} from '../apis/type.js'
export default {
  async mounted(){
    if(sessionStorage.getItem('userId') == null){
      this.$toast.error("请先登录");
      this.$router.push('/login');
    }
    var that = this;
    try{
      const response = await getList('all',1);
      console.log(response);
      const list = response.data.data.passages;
      that.total = response.data.data.total;
      list.map((item)=>{
        that.passages.push(item);
      })
    }catch(err){
      console.log(err)
    }

  },
  data(){
    return{
      options:['all','easy','hard'],
      total:0,
      current:1,
      type:null,
      panel: '',  
      rando:100,
      passages:[
       
      ]
    }
  },
  methods:{
      toggle (panel) {
        this.panel = panel === this.panel ? '' : panel;
      },
async pageChangeHandler(){
        console.log(this.current);
        try{
          const response =await getList(this.type,this.current);
          console.log(response)
          if(response.data.success ==true){
            this.passages.splice(0,this.passages.length);
            const list = response.data.data.passages;
            this.total = response.data.data.total;
            list.map((item)=>{
            this.passages.push(item);
            })
          }
        }catch(err){
          console.log(err)
        }
      },
      PLAY(id){
        this.$router.push(`/main/${id}`)
      },
      difficultyHandler(){
        this.current =1;
        this.pageChangeHandler();
      }
  },
  computed:{
     pageNum(){
        return Math.floor(this.total/6)+1;
      },
  }
}
</script>
<style scoped>
  .title{
    margin-top:20px;
  }
</style>

